<template>
  <div class="placeholder-wrap">
    <div class="content">
      <img class="img" :src="type == 'empty' ? empty : networkError" />
      <h1 v-if="title" class="title">{{ title }}</h1>
      <zui-button v-if="showRetry" class="retry-btn" @click="emit('retry')">重试</zui-button>
    </div>
  </div>
</template>

<script setup>
import empty from '@/assets/empty.svg'
import networkError from '@/assets/network-error.svg'

// empty: 空，networkError: 网络错误
const props = defineProps({ type: String, title: String, showRetry: Boolean })
const emit = defineEmits(['retry'])
</script>

<style lang="scss" scoped>
.placeholder-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background-color: #ffffff;
  .content {
    position: absolute;
    width: 50%;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-60%);
    .img {
      width: 30%;
      min-width: 200px;
      margin: 0 auto;
    }
    .title {
      margin-top: 20px;
      text-align: center;
      color: var(--color-red);
    }
  }
  .retry-btn {
    width: 30%;
    margin: 20px auto 0 auto;
  }
}
</style>
